<template>
	<a-modal v-bind="option" v-on="events" class="dialog-card-container">
		<div class="a-card-title">
			<a-card class="dialog-card-container" :tab-list="[{key: 'detail', tab: '申请详情'}]" :active-tab-key="activeKey" @tabChange="(key: string) => (activeKey = key)">
				<div class="content">
					<a-descriptions size="small" :column="4">
						<template #title>
							<div class="d-module-title">
								<b>换房信息</b>
								<a-tag v-if="Object.keys(detail).length" :color="labelStatus[detail.flowStatus].color" style="margin-left: 10px">{{ labelStatus[detail.flowStatus].name }}</a-tag>
							</div>
						</template>

						<template v-if="detail">
							<a-descriptions-item label="房源地址" :span="4">
								<template v-if="detail.houseAlias">
									<span class="house-label">{{ detail.houseAlias }}</span>
								</template>
								{{ detail.houseAddress }}
							</a-descriptions-item>
							<a-descriptions-item label="换房地址" :span="4">
								<template v-if="detail.changeHouseAddress">
									<span class="house-label">{{ detail.changeHouseAlias }}</span>
								</template>
								{{ detail.changeHouseAddress }}
							</a-descriptions-item>
							<a-descriptions-item label="合同周期" :span="2">{{ formatDate(detail.beginTime) }}至{{ formatDate(detail.endTime) }}</a-descriptions-item>
							<a-descriptions-item label="换房时间" :span="2">
								{{ detail.quiteDate }}
							</a-descriptions-item>
							<a-descriptions-item label="换房原因" :span="4">
								{{ detail.changeReason }}
							</a-descriptions-item>
						</template>
					</a-descriptions>

					<a-descriptions size="small" :column="4" style="margin-top: 20px">
						<template #title>
							<div class="d-module-title">
								<b>申请信息</b>
							</div>
						</template>

						<template v-if="detail">
							<a-descriptions-item label="申请人姓名" :span="2">
								{{ detail.name }}
							</a-descriptions-item>
							<a-descriptions-item label="申请人手机号" :span="2">
								{{ detail.phone }}
							</a-descriptions-item>
							<a-descriptions-item label="申请时间" :span="2">
								{{ detail.createTime }}
							</a-descriptions-item>
						</template>
					</a-descriptions>

					<a-descriptions size="small" :column="4" v-if="detail.flowStatus === 3 || detail.flowStatus === 4" style="margin-top: 20px">
						<template #title>
							<div class="d-module-title">
								<b>处理信息</b>
							</div>
						</template>

						<template v-if="detail">
							<a-descriptions-item label="处理人姓名" :span="2">
								{{ detail.opInfo?.opName }}
							</a-descriptions-item>
							<a-descriptions-item label="处理人手机号" :span="2">
								{{ detail.opInfo?.opPhone }}
							</a-descriptions-item>
							<a-descriptions-item label="处理时间" :span="4">
								{{ detail.opInfo?.opTime }}
							</a-descriptions-item>
							<a-descriptions-item v-if="detail.flowStatus == 4" :label="detail.quitStatus + '原因'" :span="4">
								{{ detail.flowStatus === 3 ? detail.quiteReason : detail.opInfo?.reason }}
							</a-descriptions-item>
						</template>
					</a-descriptions>
				</div>
				<!-- 操作按钮 -->
				<div class="a-modal-dialog-footer" v-if="Object.keys(detail).length">
					<a-space :size="12">
						<template v-for="(operationItem, operationIndex) in operationList" :key="operationIndex">
							<template v-if="store.hasPermissions(operationItem.action)">
								<a-button danger v-if="operationItem.type == 'danger'" @click="handler(operationItem.field)">{{ operationItem.name }}</a-button>
								<a-button v-else :type="operationItem.type" @click="handler(operationItem.field)">{{ operationItem.name }}</a-button>
							</template>
						</template>
					</a-space>
				</div>
			</a-card>
		</div>
		<!-- 换房 -->
		<change-house-dialog :apply-id="detail.applyId" :contract-id="detail.contractId" :change-house-id="detail.changeHouseId" v-model:visible="operationField.showChangeHouse" :quiteDate="detail.quiteDate" @success="getDetail" />
		<!-- 详情弹窗 -->
		<detail-dialog :contract-id="seeContractId" v-model:visible="operationField.showSeeContract" :operation-visible="false" @close="getDetail" />
		<!-- 拒绝 -->
		<lease-to-void-dialog :id="data.applyId" v-model:visible="operationField.showRefuse" @success="getDetail" />
	</a-modal>
</template>
<script setup lang="ts">
	import {reactive, ref, toRef, watch} from 'vue'
	import {renterContractApplyDetail} from '@/api/contract'
	import {labelStatus} from '@/utils/exchange-status'
	import {useStore} from '@/store/index'
	import ChangeHouseDialog from '@/components/contract/tenant/change-house-dialog.vue'
	import DetailDialog from '@/components/contract/contract-detail-dialog'
	import LeaseToVoidDialog from '@/components/contract/tenant/lease-to-void-dialog.vue'
	import {formatDate} from 'yuxin-base/src/utils/date'

	const store = useStore()

	const props = defineProps<{
		visible: boolean
		data: any
	}>()

	const emits = defineEmits(['update:visible', 'close'])
	const activeKey = ref<string>('detail')
	const option = reactive({
		width: 800,
		header: null,
		footer: null,
		maskClosable: false,
		centered: true,
		destroyOnClose: true,
		bodyStyle: {padding: 0, height: '60vh'},
		visible: toRef(props, 'visible')
	})
	const detail = ref<any>({})
	const operationList = ref<any>([])
	const contractData = ref<any>({})
	const getDetail = () => {
		renterContractApplyDetail(props.data.applyId).then((res: any) => {
			detail.value = res.data
			detail.value.quitStatus = detail.value.flowStatus === 3 ? '处理' : detail.value.flowStatus === 4 ? '拒绝' : ''
			operationList.value = [...labelStatus[res.data.flowStatus].operation].sort((a: any, b: any) => a.sort - b.sort)
		})
	}

	type statementField = {
		[key: string]: boolean
	}
	const seeContractId = ref<number | string>('')
	// 操作按钮
	const operationField = reactive<statementField>({
		//签约租客合同
		showSignContract: false,
		// 换房
		showChangeHouse: false,
		// 查看合同
		showSeeContract: false,
		// 拒绝
		showRefuse: false
	})
	const handler = (field: string) => {
		seeContractId.value = field == 'showRentAfterContract' ? detail.value.id : detail.value.contractId
		if (['showRentBeforeContract', 'showRentAfterContract'].includes(field)) {
			operationField.showSeeContract = true
		} else {
			operationField[field] = true
		}
	}

	const cancel = () => {
		detail.value = {}
		emits('update:visible', false)
		setTimeout(() => emits('close'), 100)
	}

	const events = reactive({
		cancel() {
			cancel()
		}
	})

	watch(
		() => props.visible,
		(newVal: boolean) => {
			if (newVal) {
				getDetail()
			}
		}
	)
</script>
<style lang="less"></style>
